<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>今日点菜</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        background: #121212;
        color: #fff;
        margin: 0;
        padding: 0;
      }
      .order-section {
        max-width: 420px;
        margin: 0 auto 0 auto;
        background: #181a20;
        border-radius: 1.2rem;
        box-shadow: 0 4px 24px #00f2ea22;
        padding: 1.5rem 1.2rem 1.2rem 1.2rem;
      }
      .order-title {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 1.2rem;
        color: #00f2ea;
        letter-spacing: 1px;
        text-align: center;
      }
      .order-card-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }
      .order-card {
        display: flex;
        align-items: center;
        background: linear-gradient(120deg, #23272f 60%, #23233b 100%);
        border-radius: 1.2rem;
        box-shadow: 0 2px 12px #00f2ea22;
        padding: 0.7rem 1.1rem 0.7rem 0.7rem;
        position: relative;
        transition: box-shadow 0.18s, transform 0.18s;
        overflow: hidden;
        gap: 0.7rem;
      }
      .order-card-img {
        width: 56px;
        height: 56px;
        border-radius: 1rem;
        object-fit: cover;
        margin-right: 1.1rem;
        box-shadow: 0 2px 8px #00f2ea33;
        flex-shrink: 0;
        border: 2px solid #00f2ea33;
      }
      .order-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .order-card-name {
        font-size: 1.08rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0.1rem;
      }
      .order-card-desc {
        color: #b3e0f7;
        font-size: 0.92rem;
        margin-bottom: 0.2rem;
      }
      .order-card-bottom {
        display: flex;
        align-items: center;
        gap: 1.2rem;
      }
      .order-card-count {
        color: #fe2c55;
        font-weight: bold;
        font-size: 1.05rem;
      }
      .remark-section {
        margin: 1.5rem 0 1.2rem 0;
      }
      .remark-label {
        color: #b3e0f7;
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: block;
      }
      .remark-input, .time-input {
        width: 100%;
        background: #232323;
        color: #fff;
        border: 1px solid #00f2ea;
        border-radius: 10px;
        padding: 0.7rem 1rem;
        font-size: 1rem;
        margin-bottom: 1rem;
        box-sizing: border-box;
      }
      .submit-btn {
        width: 100%;
        background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff;
        font-weight: bold;
        padding: 0.7rem 0;
        border-radius: 1.2rem;
        font-size: 1.1rem;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 8px #fe2c5533;
        margin-bottom: 1.2rem;
        transition: background 0.18s;
      }
      .submit-btn:hover {
        background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%);
      }
      .history-entry {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #20232a;
        border-radius: 1rem;
        padding: 1rem 1.2rem;
        margin-top: 1.2rem;
        cursor: pointer;
        box-shadow: 0 2px 8px #00f2ea22;
        transition: background 0.18s;
      }
      .history-entry:hover {
        background: #23233b;
      }
      .history-entry-title {
        color: #00f2ea;
        font-weight: bold;
        font-size: 1.08rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .history-entry-arrow {
        color: #b3e0f7;
        font-size: 1.2rem;
      }
      .del-btn {
        background: none;
        border: none;
        color: #fe2c55;
        font-size: 1.1rem;
        cursor: pointer;
        border-radius: 6px;
        padding: 0.2rem 0.5rem;
        transition: background 0.15s;
        margin: 0;
      }
      .del-btn:hover {
        background: #232323;
        color: #fff;
      }
      .order-card-remark {
        color: #ffd580;
        font-size: 0.92rem;
        margin-top: 0.1rem;
        word-break: break-all;
      }
    </style>
  </head>
  <body>
    <div class="order-section">
      <div
        class="order-nav"
        style="display:flex;align-items:center;gap:0.7rem;margin-bottom:1.2rem;"
      >
        <button
          onclick="window.history.back()"
          style="background:none;border:none;outline:none;cursor:pointer;padding:0;display:flex;align-items:center;"
        >
          <i class="fa fa-arrow-left text-xl text-cyan-400"></i>
        </button>
        <div class="order-title" style="margin:0;text-align:left;flex:1;">
          今日点菜
        </div>
      </div>
      <div
        id="order-empty"
        style="display:none;text-align:center;padding:2.5rem 0 1.5rem 0;"
      >
        <i class="fa fa-utensils text-3xl text-gray-500 mb-2"></i>
        <div class="text-gray-400 text-lg mt-2">今日暂无点菜</div>
      </div>
      <div
        id="order-done"
        style="display:none;text-align:center;padding:2.5rem 0 1.5rem 0;"
      >
        <i class="fa fa-check-circle text-3xl text-green-400 mb-2"></i>
        <div class="text-green-300 text-lg mt-2">今日已完成点菜</div>
      </div>
      <div class="order-card-list" id="order-card-list"></div>
      <div class="remark-section" id="remark-section">
        <label class="remark-label" for="remark">备注</label>
        <textarea
          class="remark-input"
          id="remark"
          rows="2"
          placeholder="如忌口、特殊需求等"
        ></textarea>
        <label class="remark-label" for="order-time">用餐时间</label>
        <input class="time-input" id="order-time" type="datetime-local" />
      </div>
      <button class="submit-btn" id="submit-btn">提交菜单</button>
      <div class="history-entry" onclick="goToHistory()">
        <span class="history-entry-title"
          ><i class="fa fa-history"></i>历史菜单</span
        >
        <i class="fa fa-chevron-right history-entry-arrow"></i>
      </div>
    </div>
    <script>
      // mock今日点菜数据
      let todayOrder = [
        {id:1, name:'红烧肉', img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg', desc:'肥而不腻，入口即化', count:2, price:28},
        {id:2, name:'清炒时蔬', img:'https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg', desc:'新鲜健康，清爽可口', count:1, price:16}
      ];
      let orderSubmitted = false;
      function renderOrderCards() {
        const cardList = document.getElementById('order-card-list');
        const remarkSection = document.getElementById('remark-section');
        const submitBtn = document.getElementById('submit-btn');
        const emptyTip = document.getElementById('order-empty');
        const doneTip = document.getElementById('order-done');
        if (orderSubmitted) {
          cardList.style.display = 'none';
          remarkSection.style.display = 'none';
          submitBtn.style.display = 'none';
          emptyTip.style.display = 'none';
          doneTip.style.display = '';
          return;
        }
        if (!todayOrder || todayOrder.length === 0) {
          cardList.style.display = 'none';
          remarkSection.style.display = 'none';
          submitBtn.style.display = 'none';
          doneTip.style.display = 'none';
          emptyTip.style.display = '';
        } else {
          cardList.style.display = '';
          remarkSection.style.display = '';
          submitBtn.style.display = '';
          doneTip.style.display = 'none';
          emptyTip.style.display = 'none';
          cardList.innerHTML = todayOrder.map((item, idx) => `
            <div class="order-card">
              <img class="order-card-img" src="${item.img}" alt="${item.name}" />
              <div class="food-info" style="flex:1;display:flex;flex-direction:column;justify-content:center;">
                <div class="order-card-name">${item.name}</div>
                <div class="order-card-desc">${item.desc}</div>
                ${item.remark ? `<div class="order-card-remark">备注：${item.remark}</div>` : ''}
              </div>
              <div style="display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;min-width:54px;">
                <span class="order-card-count">x${item.count}</span>
                <button class="del-btn" onclick="deleteOrderItem(${idx})" title="删除"><i class="fa fa-trash"></i></button>
              </div>
            </div>
          `).join('');
        }
      }
      document.getElementById('submit-btn').onclick = function() {
        todayOrder = [];
        orderSubmitted = true;
        renderOrderCards();
      };
      function goToHistory() {
        window.location.href = 'history_menu.html';
      }
      function deleteOrderItem(idx) {
        todayOrder.splice(idx, 1);
        renderOrderCards();
      }
      renderOrderCards();
    </script>
  </body>
</html>
